import { TagCloud } from 'react-tagcloud'
import { usePageTitle } from '@/hooks'
import { useNavigate } from 'react-router-dom'
import { useRequest } from 'ahooks'
import { getTagGroup } from '@/service'
import { Tooltip } from 'antd'
import "./index.less"

export default function Keyword() {

  const navigate = useNavigate();

  const { data = [] } = useRequest(getTagGroup);

  usePageTitle("关键词")
  
  return (
    <div className="keyword">
      <div className="title">共计{ data.length}个标签</div>
      <div className="tag-container">
        <TagCloud
          minSize={12}
          maxSize={30}
          tags={data}
          className="tag-content"
          onClick={(tag: App.ArticleTagGroupItem) => {
            navigate(`/keyword_list/${tag.value}`)
          }}
          renderer={(tag:App.ArticleTagGroupItem, size:number, color:string) => {
            return (
              <Tooltip title={`共计${tag.count}篇文章`} key={tag.value}>
                <div style={{ color , fontSize:size }} className={"tag-item"}>
                  {tag.value}
                </div>
              </Tooltip>
            )
          }}
        />
      </div>
    </div>
  )
}
